<template>
	<view class="my_team">
		<u-sticky>
			<view class="header_box w100">
				<view class="nav_list_box flex">
					<view class="auto_box" v-for="(item, index) in navList" :key="index" @click="onNav(index)">
						<view :class="[navListIndex == index ? 'nav_list_active' : 'nav_list', 's32', 'familytow']">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<block v-if="navListIndex == 0">
				<view class="flex align-center warp">
					<view class="flex flex-clum align-center" style="width: 179rpx">
						<view class="item">
							{{ teamDetail.total || 0 }}
						</view>
						<view class="text">团队人数</view>
					</view>
					<view class="line"></view>
					<view class="flex flex-clum align-center" style="width: 179rpx">
						<view class="item">
							{{ teamDetail.order_number || 0 }}
						</view>
						<view class="text">团队订单</view>
					</view>
					<view class="line"></view>
					<view class="flex flex-clum align-center" style="width: 179rpx">
						<view class="item">
							{{ teamDetail.money || 0 }}
						</view>
						<view class="text">团队收入</view>
					</view>
					<view class="line"></view>
					<view class="flex flex-clum align-center" style="width: 179rpx">
						<view class="item">
							{{ teamDetail.rebate || 0 }}
							<text class="mark">万</text>
						</view>
						<view class="text">团队业绩</view>
					</view>
				</view>
				<view class="flex align-center justify-between searchBox">
					<view class="searchBar">
						<u-search v-model="iptTxt" placeholder="输入合伙人姓名/电话" @custom="getTeamInfo" @clear="getTeamInfo"></u-search>
					</view>
					<view class="filter" @click="showScreen = !showScreen">
						<image class="rqsxicon" src="/static/rqsx.svg"></image>
						<text class="title">筛选</text>
						<image :class="['arrow', { showv: showScreen }]" src="/static/down.svg"></image>
					</view>
				</view>
				<!-- 筛选条件弹窗 -->
				<view v-show="showScreen" class="filter-box" style="height: calc(100vh - 402rpx); top: 402rpx">
					<view class="filter-container">
						<view class="fillter-warp">
							<view class="title">团队成员</view>
							<view class="flex">
								<view class="btn" :class="{ select: screen == 0 }" @click="screen = 0">全部</view>
								<view class="btn" :class="{ select: screen == 1 }" @click="screen = 1">店铺合伙人</view>
							</view>
						</view>
						<view class="btn-group">
							<view @click="showScreen = false" class="btn cancel">取消</view>
							<view @click="search" class="btn confirm">确定</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="navListIndex == 1">
				<view class="flex justify-between align-center searchBox">
					<view class="searchBar">
						<u-search v-model="iptTxt" placeholder="按订单名称/店名/推荐人搜索" @custom="getOrder" @clear="getOrder"></u-search>
					</view>
					<view class="filter" @click="expandAndCollapse">
						<image class="rqsxicon" src="/static/rqsx.svg"></image>
						<text class="title">筛选</text>
						<image :class="['arrow', { showv: showv }]" src="/static/down.svg"></image>
					</view>
				</view>
				<!-- 点击筛选时间 -->
				<view class="filter-box" v-show="showv" style="height: calc(100vh - 220rpx); top: 220rpx">
					<view class="filter-container">
						<view class="fillter-warp">
							<view class="title">按时间筛选订单</view>
							<view class="date_box">
								<uni-datetime-picker ref="time1" type="date" v-model="startTime" start="2021-3-20" end="2111-6-30" />
								<view class="divider"></view>
								<uni-datetime-picker ref="time2" type="date" v-model="endTime" start="2021-3-20" end="2111-6-30" />
							</view>
						</view>
						<view class="btn-group">
							<view class="btn reset" @click="reset">重置</view>
							<view class="btn confirm" @click="getOrder">确定</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="navListIndex == 2"></block>
		</u-sticky>

		<!-- 团队信息列表 -->
		<block v-if="navListIndex == 0">
			<view class="add" @click="goInvitation">
				<image src="../static/fenx.png"></image>
			</view>
			<view v-if="list.length == 0" class="empty">暂无数据!</view>
			<block v-else>
				<view class="list">
					<view class="list-item" v-for="(item, index) in list" :key="index">
						<view class="flex align-center justify-between list-box">
							<view class="flex">
								<view class="avatar">
									<image :src="item.avatar"></image>
								</view>
								<view class="name">
									{{ item.name }}
								</view>
								<view v-if="item.identity == 5" class="head">
									<image src="../static/partner.png"></image>
								</view>
							</view>
							<view class="flex align-center">
								<view class="mobile">
									{{ (item.mobile && item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')) || '暂无' }}
								</view>
								<view v-if="item.mobile" @click="callPhone(item.mobile)" class="callMobile">拨号</view>
							</view>
						</view>
						<view class="flex align-center justify-between row">
							<view class="text">收益金额</view>
							<view class="num">￥{{ item.rebate || 0 }}</view>
						</view>
						<view v-if="item.identity == 5" class="flex justify-between row">
							<view class="text">合作店铺</view>
							<view class="">
								<view class="shopname" v-if="item.isOpen || indexs == 0" v-for="(items, indexs) in item.shop_list" :key="indexs">
									{{ items.shopname }}
								</view>
							</view>
						</view>
						<view v-if="item.identity == 5" class="expand" @click="isOpen(item, index)">
							<view v-if="item.shop_list && item.shop_list.length > 1">
								<image v-if="!item.isOpen" src="../static/bottomArrow.png"></image>
								<image v-else src="../static/topArrow.png"></image>
							</view>
						</view>
					</view>
				</view>
			</block>
		</block>
		<block v-if="navListIndex == 1">
			<view v-if="orderList.length == 0" class="empty">暂无数据!</view>
			<block v-else>
				<view class="cj_ji_list" v-for="(item, index) in orderList" :key="index">
					<view class="date">{{ item.create_date }}</view>
					<view class="item" v-for="(items, index) in item.orders" :key="index">
						<view class="top_box">
							<view class="flex">
								<view class="left_shuxixan_box"></view>
								<view class="right_name s32 family f500">订单人 {{ items.order_user_nickname }}</view>
							</view>
							<view class="name_money_box flex flexjus">
								<view class="name_box s32 f500 family">
									{{ items.order_type == 'goods' ? items.goods[0].difference + items.goods[0].title : items.goods[0].title }}
								</view>
								<view class="money_box s32 fblod familytow">￥{{ items.pay.order_price }}</view>
							</view>
							<view class="image_stor-name_date flexjus align-center">
								<view class="flex align-center">
									<view class="image_box">
										<image class="w100 h100" :src="items.shop_avatar"></image>
									</view>
									<view class="sotre_name f500 s24 family">
										{{ items.shopname }}
									</view>
								</view>
								<view class="date_box s24 family f500">
									{{ items.createtime_text }}
								</view>
							</view>
							<view class="status">订单状态：{{ items.status_text }}</view>
						</view>
						<view class="bottom_box flex flexjus">
							<view class="tjr_name s28 family f500">推荐人：{{ items.referrer_name ? items.referrer_name : '无' }} 返利：￥{{ items.referrer_rebate_money }}</view>
							<view class="fl_money s28 family f500">我的返利：￥{{ items.self_rebate_money }}</view>
						</view>
					</view>
				</view>
			</block>
		</block>
		<block v-if="navListIndex == 2">
			<view v-if="rankingList.length == 0" style="padding-top: 30rpx; font-size: 26rpx; color: #999; text-align: center">暂无数据!</view>
			<block v-else>
				<view class="ranking_list_box">
					<view class="qieh_btn_box flex">
						<view
							:class="[rankingIndex == index ? 'qieh_btn' : 'qieh_btn_active', 'txtali', 's28', 'f500', 'family']"
							v-for="(item, index) in rankingList"
							:key="index"
							@click="rankingActive(index)"
						>
							{{ item.name }}
						</view>
					</view>
					<view class="jidu_niandu_box">
						<view class="du_list flex">
							<view
								:class="[duIndex == index ? 'du_list_box_active' : 'du_list_box', 's24', 'family', 'f500', 'txtali']"
								v-for="(item, index) in duList"
								:key="index"
								@click="duActive(index)"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="ranking_jn_list">
						<view class="list_box_jn flex" v-for="(item, index) in rankList" :key="index">
							<view class="left_image">
								<image class="w100 h100" :src="item.avatar"></image>
							</view>
							<view class="bottom_border flex">
								<view class="name_minci_box">
									<view class="cj_name_box s30 f500 family">
										{{ item.nickname }}
									</view>
									<view class="cj_mingci s24 f500 family">第{{ index + 1 }}名</view>
								</view>
								<view class="danshu_box s30 f500 family" v-if="rankingIndex == 0">{{ item.score }}单</view>
								<view class="danshu_box_money s30 f500 family" v-if="rankingIndex == 1">￥3534</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</block>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup_box flex">
				<view class="fengxiang_weima" @click="download">
					<view class="weima_image">
						<image class="w100 h100" src="/pages/filePages/static/fxewm.png"></image>
					</view>
					<view class="weima_txt s28 family f500 txtali">分享邀请码</view>
				</view>
				<view class="fengxiang_weima">
					<button open-type="share" :plain="true" style="background-color: transparent; border: none; padding: 0">
						<view class="weima_image">
							<image class="w100 h100" src="/pages/filePages/static/fxlj.png"></image>
						</view>
						<view class="weima_txt s28 family f500 txtali" style="margin-top: 10rpx">分享邀请链接</view>
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			iptTxt: '',
			navList: [
				{
					name: '团队信息'
				},
				{
					name: '成交记录'
				},
				{
					name: '排行榜'
				}
			],
			navListIndex: 0,
			rankingList: [
				{
					name: '返利排行'
				},
				{
					name: '成交排行'
				}
			],
			rankingIndex: 0,
			duList: [
				{
					name: '季度'
				},
				{
					name: '年度'
				}
			],
			duIndex: 0,
			page: 1,
			teamDetail: {},
			list: [],
			uid: 0,
			userName: '',
			yqm: '',
			orderList: [],
			rankList: [],
			// 筛选条件
			showScreen: false,
			screen: 0,
			showv: false,
			startTime: '', //开始时间
			endTime: '' //结束时间
		};
	},
	onLoad() {
		this.$getUserInfo();
		this.getTeamInfo();
		this.getTeamDetail();
		this.uid = uni.getStorageSync('userInfo').id;
		this.userName = uni.getStorageSync('userInfo').nickname;
		this.yqm = uni.getStorageSync('userInfo').invite_code;
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: `${this.userName}邀请您，一起成为荟云街平台合伙人！帮卖享分成！`,
			path: '/pages/filePages/helpSell/helpSell?uid=' + this.uid + '&yqm=' + this.yqm,
			imageUrl: '../static/share.jpg'
		};
	},
	methods: {
		//
		isOpen(item, index) {
			this.list[index].isOpen = !this.list[index].isOpen;
		},
		//点击加号
		goInvitation() {
			uni.navigateTo({
				url: '/pages/schedule/addPeople'
			});
		},
		//拨打电话
		callPhone(e) {
			uni.makePhoneCall({
				phoneNumber: e, //仅为示例
				success: (res) => {},
				fail: (res) => {}
			});
		},
		// 搜索
		search() {
			this.showScreen = false;
			this.getTeamInfo();
		},
		// 成交记录里的搜索
		expandAndCollapse() {
			this.showv = !this.showv;
		},
		getTeamDetail() {
			let that = this;
			that
				.$request({
					url: 'team/getStatistics'
				})
				.then((res) => {
					if (res.data.code == 1) {
						that.teamDetail = res.data.data;
					}
				});
		},
		// 团队信息
		getTeamInfo() {
			let that = this;
			uni.showLoading({
				title: '加载中'
			});
			const data = {
				keyword: that.iptTxt,
				offset: that.page,
				count: 10,
				iden: this.screen
			};
			this.$request({
				url: 'team/getTeamInfo',
				method: 'POST',
				data
			}).then((res) => {
				if (res.data.code == 1) {
					for (let i = 0; i < res.data.data.data.length; i++) {
						res.data.data.data[i].isOpen = false;
					}
					that.list = res.data.data.data;
				}
				uni.hideLoading();
			});
		},

		// 成交记录
		getOrder() {
			if (this.showv) {
				this.showv = false;
			}
			const data = {
				keyword: this.iptTxt,
				start: this.startTime.length ? this.startTime + ' 00:00:00' : '',
				end: this.endTime.length ? this.endTime + ' 23:59:59' : ''
			};
			this.$request({
				url: 'team/getOrder',
				method: 'POST',
				data
			}).then((res) => {
				if (res.data.code == 1) {
					this.orderList = res.data.data.data;
				}
			});
		},

		// 排行榜
		getLowerRank() {
			this.$request({
				url: 'team/getLowerRank',
				method: 'POST',
				data: {
					type: this.rankingIndex == 0 ? 'rebate' : 'sales_volume',
					interval: this.duIndex == 0 ? 'quarterly' : 'annual'
				}
			}).then((res) => {
				this.rankList = res.data.data;
			});
		},
		// 下载邀请码
		download() {
			let that = this;
			that
				.$request({
					url: 'share/getqrcode',
					method: 'POST',
					data: {
						invite_code: uni.getStorageSync('userInfo').invite_code
					}
				})
				.then((res) => {
					uni.showLoading({
						title: '下载中...'
					});
					uni.downloadFile({
						url: res.data.data.code,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function () {
										uni.showToast({
											title: '下载完成',
											icon: 'success',
											duration: 2000
										});
									},
									fail: (error) => {
										uni.hideLoading();
										uni.showToast({
											title: '您已拒绝了访问相册',
											icon: 'none',
											duration: 2000
										});
									}
								});
							}
						}
					});
				});
		},
		rankingActive(ind) {
			this.rankingIndex = ind;
			this.getLowerRank();
		},
		onNav(ind) {
			this.navListIndex = ind;
			if (ind == 0) {
				this.getTeamInfo();
			} else if (ind == 1) {
				this.getOrder();
			} else {
				this.getLowerRank();
			}
		},
		duActive(ind) {
			this.duIndex = ind;
			this.getLowerRank();
		},
		open() {
			this.$refs.popup.open('bottom');
		}
	}
};
</script>

<style scoped lang="scss">
.flex {
	display: flex;
}
.flex-clum {
	flex-direction: column;
}
.align-center {
	align-items: center;
}
.justify-around {
	justify-content: space-around;
}
.justify-between {
	justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.my_team {
	.header_box {
		.nav_list_box {
			background: #ffffff;
			border-bottom: 2rpx solid #efefef;
			.auto_box {
				width: 130upx;
				margin-left: 94upx;
				text-align: center;

				.nav_list {
					color: #666;
					font-weight: 500;
					line-height: 100upx;
				}

				.nav_list_active {
					position: relative;
					z-index: 1;
					color: #333;
					font-weight: bold;
					line-height: 100upx;
					&::after {
						position: absolute;
						left: 50%;
						bottom: 0;
						content: '';
						width: 64upx;
						height: 4upx;
						background-color: #333;
						transform: translate(-50%, 0);
						z-index: 2;
					}
				}
			}
		}
	}
	.warp {
		background: #fff;
		border-top: 2rpx solid #f4f5f9;
		padding: 40rpx 13rpx;
		.item {
			font-size: 40rpx;
			font-weight: 500;
			color: #ff3f4a;
		}
		.text {
			font-size: 26rpx;
			color: #000;
			margin-top: 15rpx;
		}
		.line {
			width: 2rpx;
			height: 48rpx;
			background: #e3e3e3;
		}
		.mark {
			font-size: 28rpx;
			font-weight: 500;
			color: #000;
		}
	}
	.filter {
		display: flex;
		justify-content: center;
		align-items: center;
		.rqsxicon {
			width: 24rpx;
			height: 24rpx;
		}
		.arrow {
			width: 24rpx;
			height: 24rpx;
			transition: all 300ms;
		}
		.showv {
			transform: rotate(180deg);
		}
		.title {
			padding: 0 8rpx;
			font-size: 26rpx;
		}
	}
	.searchBox {
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-top: 2rpx solid #f4f5f9;
	}
	.searchBar {
		flex: 1;
		padding-right: 30rpx;
		/deep/.u-search {
			background-color: #f2f2f2;
			border-radius: 30rpx;
		}
		/deep/.u-search__content__input--placeholder {
			font-size: 24rpx;
		}
		/deep/.u-search__action {
			width: 108rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #fff;
			border-radius: 30rpx;
		}
	}
	.team_detail_box {
		width: 750upx;
		height: 190upx;
		background: #ffffff;
		margin-top: 18upx;
		overflow: hidden;

		.detail_box {
			width: 104upx;
			margin-top: 40upx;

			.top_num {
				color: #ff3f4a;
			}

			.bottom_name {
				color: #000000;
				margin-top: 20upx;
			}
		}

		.shuxian {
			width: 2upx;
			height: 48upx;
			background: #e3e3e3;
			margin-top: 72upx;
			margin-left: 38upx;
			margin-right: 38upx;
		}
	}
	.filter-box {
		position: absolute;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 200;
		.filter-container {
			width: 100%;
			background-color: #fff;
			border-top: 2rpx solid #f2f2f2;
		}
		.fillter-warp {
			padding: 32rpx;
			.title {
				height: 32rpx;
				padding-bottom: 30rpx;
				font-size: 26rpx;
				color: #333;
			}
			.btn {
				min-width: 140rpx;
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 28rpx;
				background: #e9ebf0;
				border-radius: 8rpx;
				font-size: 26rpx;
				color: #666975;
				text-align: center;
				box-sizing: border-box;
				& + .btn {
					margin-left: 32rpx;
				}
			}
			.select {
				background: #23252c;
				color: #fff;
			}
			.date_box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.divider {
					width: 64rpx;
					height: 2rpx;
					margin: 0 28rpx;
					background-color: #666;
				}
			}
		}
		.btn-group {
			display: flex;
			.btn {
				width: 50%;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
			.reset,
			.cancel {
				background-color: rgba(235, 190, 135, 0.3);
				color: #d09f65;
			}
			.confirm {
				background: linear-gradient(to right, #e4b77f 0%, #cd9c61 100%);
				color: #fff;
			}
		}
	}
	.share_list_box {
		width: 750upx;
		background: #ffffff;
		margin-top: 20upx;
		overflow: hidden;

		.header_share {
			height: 94upx;
			background: #ffffff;
			margin-top: 28upx;

			.uni_ipt {
				width: 460upx;
				height: 68upx;
				background: #f3f3f3;
				border-radius: 8upx 8upx 8upx 8upx;
				margin-left: 32upx;
				margin-top: 12upx;
				padding-left: 78upx;
			}

			.search_img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 50rpx;
				margin-top: 28rpx;
			}

			.search_btn {
				width: 116upx;
				height: 68upx;
				background: #e0a76d;
				border-radius: 34upx 34upx 34upx 34upx;
				line-height: 68upx;
				color: #ffffff;
				margin-top: 10upx;
				margin-left: 32upx;
			}
		}

		.list_box {
			margin-top: 52upx;

			.list_head {
				width: 686upx;
				border-bottom: 2upx solid #efefef;
				margin: 0 auto;
				padding-bottom: 34upx;
				margin-bottom: 32upx;

				.left_img_box {
					width: 76upx;
					height: 76upx;
				}

				.con_name_phone {
					margin-left: 18upx;

					.name_txt {
						color: #333333;
					}

					.phone_img_txt {
						margin-top: 4upx;

						.phone_img {
							width: 28upx;
							height: 28upx;
						}

						.phone_txt {
							color: #ebbe87;
							margin-top: 2upx;
						}
					}
				}

				.money_txt {
					position: absolute;
					right: 32upx;
					color: #333333;
				}
			}
		}
	}

	.cj_ji_list {
		width: 100%;
		background: #fff;
		border-bottom: 2rpx solid #e1e1e1;
		margin-top: 20upx;
		overflow: hidden;
		box-sizing: border-box;
		.date {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 32rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333;
			border-bottom: 2rpx solid #e1e1e1;
		}
		.item {
			padding: 0 32rpx;
			border-bottom: 2rpx solid #e1e1e1;
		}
		.top_box {
			width: 100%;
			border-bottom: 2upx solid #efefef;
			margin-top: 30upx;
			padding-bottom: 16upx;

			.left_shuxixan_box {
				width: 6upx;
				height: 32upx;
				background: #ebbe87;
			}

			.right_name {
				color: #ebbe87;
				margin-left: 20rpx;
				margin-top: -6rpx;
			}

			.name_money_box {
				margin-top: 24upx;

				.name_box {
					width: 442upx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.money_box {
					color: #333333;
				}
			}

			.image_stor-name_date {
				margin-top: 16upx;

				.image_box {
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					background-color: #eee;
					overflow: hidden;
					font-size: 0;
				}

				.sotre_name {
					color: #999;
					margin-left: 8upx;
				}

				.date_box {
					color: #999;
				}
			}
			.status {
				margin-top: 16upx;
				font-size: 24rpx;
				color: #999;
				text-align: right;
			}
		}

		.bottom_box {
			line-height: 100rpx;

			.tjr_name {
				color: #666;
			}

			.fl_money {
				color: #666;

				.fl_money_txt {
					color: #ff3f4a;
				}
			}
		}
	}

	.ranking_list_box {
		width: 686upx;
		padding-left: 32upx;
		padding-right: 32upx;
		margin-top: 20upx;
		overflow: hidden;
		background: #ffffff;

		.qieh_btn_box {
			margin-top: 38upx;

			.qieh_btn {
				width: 196upx;
				height: 80upx;
				background: #999999;
				border-radius: 41upx 41upx 41upx 41upx;
				line-height: 80upx;
				color: #ffffff;
				margin-left: 90upx;
			}

			.qieh_btn_active {
				width: 196upx;
				height: 80upx;
				background: #ffffff;
				border-radius: 41upx 41upx 41upx 41upx;
				line-height: 80upx;
				color: #999999;
				margin-left: 120upx;
			}
		}

		.jidu_niandu_box {
			margin-top: 34upx;

			.du_list {
				.du_list_box_active {
					width: 72upx;
					height: 44upx;
					background: #ebbe87;
					line-height: 44upx;
					border-radius: 8upx;
					color: #ffffff;
					margin-right: 22upx;
				}

				.du_list_box {
					width: 72upx;
					height: 44upx;
					border: 2upx solid #cbcbcb;
					line-height: 44upx;
					border-radius: 8upx;
					color: #cbcbcb;
					margin-right: 22upx;
				}
			}
		}

		.ranking_jn_list {
			margin-top: 32upx;

			.list_box_jn {
				margin-bottom: 32upx;

				.left_image {
					width: 72upx;
					height: 72upx;
					border-radius: 50%;
					overflow: hidden;
				}

				.bottom_border {
					padding-bottom: 34upx;
					border-bottom: 2upx solid #efefef;

					.name_minci_box {
						margin-left: 20upx;

						.cj_name_box {
							width: 200upx;
							color: #333333;
						}

						.cj_mingci {
							color: #666666;
						}
					}

					.danshu_box {
						color: #333333;
						margin-left: 320upx;
					}

					.danshu_box_money {
						color: #333333;
						margin-left: 290upx;
					}
				}
			}
		}
	}

	.fixed_box {
		width: 102upx;
		height: 102upx;
		position: fixed;
		top: 752upx;
		right: 0;
	}

	.popup_box {
		width: 750upx;
		height: 360upx;
		background: #ffffff;
		border-radius: 48upx 48upx 0upx 0upx;
		overflow: hidden;

		.fengxiang_weima {
			width: 168upx;
			margin-top: 106upx;
			margin-left: 32upx;

			/deep/ button {
				width: 220upx;
				border: 1upx solid #ffffff;
			}

			.weima_image {
				width: 88upx;
				height: 88upx;
				margin: 0 auto;
			}

			.weima_txt {
				color: #333333;
				margin-top: 26upx;
			}
		}
	}

	.add {
		font-size: 0;
		position: fixed;
		bottom: 190rpx;
		right: 32rpx;
		image {
			width: 136rpx;
			height: 136rpx;
		}
	}

	.empty {
		padding-top: 30rpx;
		font-size: 26rpx;
		color: #999;
		text-align: center;
	}

	.list {
		width: 100%;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
	}

	.list-item {
		border-radius: 12rpx;
		padding: 28rpx 32rpx;
		margin-bottom: 20rpx;
		background: #fff;
		.row {
			margin-top: 24rpx;
		}
		.text {
			font-size: 24rpx;
			color: #999;
		}
		.num {
			font-size: 24rpx;
			color: #333;
		}
		.shopname {
			margin-bottom: 24rpx;
			font-size: 24rpx;
			color: #333;
			text-align: right;
		}
		.expand {
			font-size: 0;
			padding-bottom: 14rpx;
			text-align: center;
			image {
				width: 20rpx;
				height: 14rpx;
			}
		}
	}
	.list-box {
		padding-bottom: 28rpx;
		border-bottom: 2rpx solid #f4f4f4;
		.avatar {
			font-size: 0;
			margin-right: 14rpx;
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.name {
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			margin-right: 12rpx;
		}
		.head {
			font-size: 0;
			image {
				width: 132rpx;
				height: 32rpx;
			}
		}
		.mobile {
			font-size: 24rpx;
			color: #333;
		}
		.callMobile {
			width: 64rpx;
			height: 36rpx;
			line-height: 36rpx;
			background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
			border-radius: 8rpx;
			margin-left: 16rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
		}
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
